<template>
  <a-card class="source-card" hoverable>
    <img slot="cover" src="/images/source.png" alt="">
    <a-card-meta title="智能编程框架研发方面">
      <div slot="description" class="description">
        <div class="grow">
          <div>信息高铁综合试验场研发</div>
          <div>5小时前</div>
        </div>
        <div class="member">
          <a-avatar v-for="i in members" :key="i" class="member-icon" icon="user" :style="{left:(50+((i-(members+1)/2)*12))+'%'}" />
        </div>
      </div>
    </a-card-meta>
  </a-card>
</template>
<script>
  export default {
    data(){
      return {
        members:5
      }
    },
    props:{},
    components:{},
    computed:{},
    mounted(){

    },
    methods:{

    }
  }
</script>
<style lang='less' scoped>
  .source-card{
    height: 343px;
    width: 336px;
    display: inline-block;
    overflow: hidden;
    margin-left: 30px;
    margin-bottom: 30px;
}
  .description{
    display: flex;
    align-items: center;
  }
  .grow{
    flex-grow: 2;
  }
  .member{
    flex-shrink: 0;
    // background: red;
    height: 55px;
    width: 100px;
    position: relative;
    overflow: hidden;
    .member-icon{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      box-shadow: 0 0 5px #999;
    }
  }
</style>